<template>
  <div class="examineHistory">
    <el-dialog title="审核历史" :visible.sync="showDialog" width="70%">
      <div class="tableBox">
        <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark" style="width: 100%">
          <el-table-column label="申请时间" prop="changeApplyDate" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column prop="changeUser" label="申请人" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column prop="implementName" label="实施清单" width="100" show-overflow-tooltip>
            <template slot-scope="scope">{{ selectItem.name }}</template>
          </el-table-column>
          <el-table-column
            prop="commonCharacterCode"
            show-overflow-tooltip
            label="审核内容"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="eventCharacterBeforeLabel"
            label="原内容"
            width="150"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="eventCharacterAfterLabel"
            label="新内容"
            width="150"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column prop="approvalUser" label="审核人" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column prop="approvalDate" label="审核时间" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column prop="approvalResult" label="审核结果" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column prop="approvalNote" label="审核意见" show-overflow-tooltip></el-table-column>
        </el-table>
        <div class="fenye">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="size"
            layout="total, sizes, prev, pager, next"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios';
  export default {
    props: {
      selectItem: {
        type: Object,
        default: () => {}
      }
    },
    watch: {},
    data() {
      return {
        showDialog: false,
        tableData: [],
        current: 1, //当前页
        size: 5, //每页的数量
        total: 0
      };
    },
    methods: {
      handleSizeChange(val) {
        this.current = 1;
        this.size = val;
        this.initPage();
      },
      handleCurrentChange(val) {
        this.current = val;
        this.initPage();
      },
      async initPage() {
        const { data } = await axios.request({
          url: `/api/v1/event/implementation/approvalHistory`,
          method: 'get',
          params: {
            eventId: this.selectItem.id,
            pageNum: this.current,
            pageSize: this.size
          }
        });
        if (data.success) {
          this.tableData = data.result.records || [];
          this.total = data.result.total;
        }
      }
    },
    mounted() {}
  };
</script>

<style lang="scss">
  .examineHistory {
    .fenye {
      margin: 20px 0;
      text-align: right;
    }
    h2 {
      font-weight: bold;
      padding-left: 10px;
      display: flex;
      align-items: center;
      margin: 10px 0;
      span {
        margin-left: 10px;
      }
    }
    .el-dialog__header {
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
    .el-form-item__content {
      display: flex;
    }

    .deleteItem {
      color: #f00;
    }
  }
</style>
